<template>
	<view class="contanier">
		<view class="content">
			<view v-if="type=='nickname'">
				<view class="input-box">
					<up-input v-model="value"></up-input>
				</view>
				<view class="tips">一个好的名字会让人眼前一亮</view>
			</view>
			<view v-if="type=='username'">
				<view class="input-box">
					<up-input v-model="value"></up-input>
				</view>
				<view class="tips">修改账号后，可能会导致无法按原账号中找到你</view>
			</view>
			<view class="qrcode-box" v-if="type=='qrcode'">
				<view class="box-content">
					<view class="avatar-Box">
						<up-avatar :src="userInfo.avatarUrl" shape="square" size="50"></up-avatar>
						<view>RogerH</view>
					</view>
					<up-qrcode :size="200" :val="userInfo.qrcode" showLoading loadingText="loading..."></up-qrcode>
				</view>
			</view>
			<view v-if="type=='gender'" class="gender-selected">
				<up-radio-group  v-model="value" placement="column">
					<up-radio activeColor="red" label="男" :name="0"></up-radio>
					<up-radio activeColor="red" label="女" :name="1"></up-radio>
				</up-radio-group>
			</view>
			<view v-if="type=='remask'">
				<view class="input-box">
					<up-textarea v-model="value" placeholder="请输入内容" ></up-textarea>
				</view>
				<view class="tips">看看你个性签名是不是最耀眼的！</view>
			</view>
		</view>
		<view class="btn-confirm" v-if="type!='qrcode'"> 
            <up-button type="success" color="#f8744d" @click="handlerConfirm">完成</up-button>
        </view>
	</view>
</template>

<script setup lang="ts">
	import {
        ref,
        onMounted,
        getCurrentInstance,
		nextTick
    } from 'vue';
	import { UserUpdateMyInfoReq } from '../../http/user';
	import { useUserStore } from '../../store/userStore';

	const value=ref("")

	const type=ref("")

	const instance=getCurrentInstance()?.proxy

	const eventChannel=instance.getOpenerEventChannel();


	const userStore=useUserStore()

	const userInfo=ref(userStore.getUser())

	
	const titleData={
		nickname:"更改名字",
		username:"更改用户名",
		qrcode:"查看个人二维码",
		gender:"设置性别",
		place:"设置地区",
		remask:"个性签名",

	}

	onMounted(()=>{

		eventChannel.on('toEditData', function(data) {

			value.value=data.value
			
			type.value=data.type

			uni.setNavigationBarTitle({
				title:titleData[type.value]
			})
		})

	})

	const handlerConfirm=()=>{
		UserUpdateMyInfoReq({field:type.value,value:value.value}).then(res=>{
			eventChannel.emit('editConfirm',{
				type:type.value,
				value:value.value
			})
			uni.navigateBack()
		})
	}

</script>

<style lang="scss">
	.qrcode-box{
		text-align: center;
		margin-bottom: 100upx;
		.box-content{
			display: inline-block;
		}
		.avatar-Box{
			display: flex;
			align-items: center;
			margin: 20upx 0;
		}
	}
	.contanier{
		margin: 0 40upx;
		.u-radio{
			flex-direction: row-reverse!important;
		}
		.u-radio__text{
			width: 100%;
		}
		.u-radio__icon-wrap{
			flex-shrink: 0;
		}
		.u-radio{
			padding: 16upx 0;
			border-bottom: 2upx solid $uni-text-color-grey;
		}
	}
	.tips{
		color: $uni-text-color-grey;
		font-size: 28upx;
		margin-bottom: 20upx;
	}
	.input-box{
		margin: 20upx 0;
	}
</style>
